<template>
  <div class="amap-wrapper">
    <div class="toolbar">
      <span v-if="loaded">
        位置: lng = {{ lng }} lat = {{ lat }}
      </span>
      <span v-else>正在定位</span>
    </div>
    <!-- <el-amap class="amap-box" :vid="'amap-vue'"></el-amap> -->
    <el-amap vid="amap"
      class="amap-demo"
      :plugin="plugin"
      :zoom="zoom"
      :center="center">
    </el-amap>
  </div>
</template>

<script>
export default {
  name: 'CenterMap',
  data () {
    let self = this
    return {
      center: [121.59996, 31.197646],
      zoom: 16,
      lng: 0,
      lat: 0,
      loaded: false,
      plugin: [{
        pName: 'Geolocation',
        events: {
          init (o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                self.lng = result.position.lng
                self.lat = result.position.lat
                self.center = [self.lng, self.lat]
                self.loaded = true
                self.$nextTick()
              }
            })
          }
        }
      }]
    }
  }
}
</script>

<style lang="less">
.amap-wrapper {
  width: 100%;
  height: calc(~"100% - 20px");;
}
.toolbar {
  background-color: white;
  color: black;
  height: 20px;
}
</style>
